<template>
<div class="wrap">
  <div id="echartContainer" style="height: 350px;"></div>
</div>
</template>
<script>
  export default {
    name: 'UserNumber',
    data(){
      return {
      }
    },
    methods:{
      getMainTitle(){
        return this.mainTitle;
      },
      loadingSuccuss(){
          this.$emit('getLoadingFinished',false)
      },
      drawMap(){
        document.getElementById('echartContainer').style.width = window.innerWidth + 'px';
        var myChart = this.$echarts.init(document.getElementById('echartContainer'))
        myChart.showLoading();
        let totalNum = 0;
        this.axios.get(this.api.getUserAddressDistribution)
        .then((res) => {
          myChart.hideLoading();
          let _data = res.data.details.list,
              realData = [];
          if(res.data.status === '1'){
            for(let i = 0; i < _data.length; i ++){
              let item = [];
              item[0] = _data[i].longitude;
              item[1] = _data[i].latitude;
              item[2] = 1;
              realData.push(item)
            }
            totalNum = res.data.details.totalnum
          }
          myChart.setOption({
            backgroundColor: '#404a59',
            title : {
              text: '所有用户详细分布图',
              subtext: `总用户数${totalNum}`,
              left: 'center',
              top: 'top',
              textStyle: {
                color: '#fff'
              }
            },
            tooltip: {},
            legend: {
              left: 'left',
              data: ['中'],
              textStyle: {
                color: '#ccc'
              }
            },
            geo: {
              map: 'china',
              label: {
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  areaColor: '#323c48',
                  borderColor: '#111'
                },
                emphasis: {
                  areaColor: '#2a333d'
                }
              }
            },
            series: [{
              name: '中',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbolSize: 1,
              large: true,
              itemStyle: {
                normal: {
                  shadowBlur: 2,
                  shadowColor: 'rgba(14, 241, 242, 0.8)',
                  color: 'rgba(14, 241, 242, 0.8)'
                }
              },
              data: realData
            }]
          });
          this.loadingSuccuss();
        })
        .catch( (err) =>{
          this.loadingSuccuss();
        })
      }
    },
    mounted(){
      this.drawMap();
    }

  }
</script>
